/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from "react";
import { Spin } from "antd";
import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";
import styles from "./style.less";

export default class Charts extends Component {
  render() {
    const { cols, canvesList, legends, title, loading = false } = this.props;
    return (
      <Spin spinning={loading}>
        {title && <div className={styles.title}>{title}</div>}
        {canvesList.origin.length != 0 ? (
          <Chart
            onTooltipChange={ev => {
              ev.items.map(data => {
                data.name = legends ? legends[data.name] : data.name;
              });
            }}
            color="name"
            height={450}
            data={canvesList}
            scale={cols}
            forceFit
            padding={[50, "auto", "auto", "auto"]}
          >
            <Legend
              name="city"
              itemFormatter={text => {
                return legends ? legends[text] : text;
              }}
              textStyle={{
                textAlign: "middle", // 文本对齐方向，可取值为： start middle end
                fill: "#404040", // 文本的颜色
                fontSize: "18", // 文本大小
                fontWeight: "bold", // 文本粗细
              }}
              position="top-right"
            />
            <Axis name="date" />
            <Axis
              name="temperature"
              label={{
                formatter: val => `${val}`,
              }}
            />
            <Tooltip
              crosshairs={{
                type: "y",
              }}
            />
            <Geom type="line" position="date*temperature" color="city" size={2} />
            <Geom
              type="point"
              position="date*temperature"
              size={4}
              shape="circle"
              color="city"
              style={{
                stroke: "#fff",
                lineWidth: 1,
              }}
            />
          </Chart>
        ) : (
          <div className={styles.example}>暂无数据</div>
        )}
      </Spin>
    );
  }
}
